<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Word文档格式检查</title>
    <link rel="stylesheet" href="/element-plus.index.css" rel="stylesheet">
    <script src="/vue.global.js"></script>
    <script src="/element-plus.full.js"></script>
    <script src="/axios.js"></script>
    <!-- <link href="https://unpkg.com/element-plus/lib/theme-chalk/index.css" rel="stylesheet"> -->
</head>
<style>
    html {
        width: 100%;
        height: 100%;
    }

    body {
        width: 100%;
        height: 100%;
    }

    #app {
        width: 100%;
        height: 100%;
        box-sizing: border-box;
        padding: 18px;
    }

    .upper {
        height: 30%;
    }

    .log-panel {
        background-color: #dddddd;
        padding: 12px;
        height: 70%;
        box-sizing: border-box;
        overflow-y: scroll;
    }

    .row {
        display: flex;
        flex-direction: row;
        align-items: center;
    }

    .red-text {
        color: #8f1722;
    }
</style>

<body>
    <div id="app">
        <div class="upper">
            <h1>Word文档格式检查工具</h1>
            <div class="row">
                <p>在这里点击上传文件：</p>

                <el-upload action="/upload" :show-file-list="false" :on-success="handleSuccess" :on-error="handleError"
                    :file-list="fileList" :accept="'.doc,.docx'" :on-exceed="handleExceed">
                    <el-button slot="trigger" size="small" type="primary" style="margin-left: 12px;">点击上传</el-button>
                </el-upload>
            </div>

            <p> 分析引擎状态：{{ busy ? "分析中" : "空闲" }}</p>
            <p> {{ busy?`正在分析：${currentFile}`: "" }}</p>
        </div>

        <div class="log-panel">
            <p v-for="log of logs" :key="log.content" :class="{'red-text': log.type==='violation'}"> {{ log.content }}
            </p>
        </div>
    </div>

    <script>
        const { ElNotification } = ElementPlus;
        const app = Vue.createApp({
            data() {
                return {
                    count: 0,
                    busy: false,
                    currentFile: "",
                    logs: [],
                    fileList: []
                }
            },
            mounted() {
                ElNotification.success("成功！")
                window.setInterval(() => {
                    axios({
                        method: "get",
                        url: "/status"
                    }).then((resp) => {
                        // console.log(resp.data)
                        const { busy, currentFile, latest_loglines } = resp.data
                        this.busy = busy
                        this.currentFile = currentFile
                        // for (const log of latest_loglines) {
                        this.logs = this.logs.concat(latest_loglines)
                        console.log(this.logs)
                        // }
                    })
                }, 2000)
            },
            methods: {
                handleSuccess(e) {
                    ElNotification.success("文件上传完成!")
                    console.log(this.fileList)
                },
                handleError(e) {
                    console.log("upload success!", e)
                },
                // handleExceed(files) {
                //     upload.value.clearFiles()
                //     const file = files[0] as UploadRawFile
                //     file.uid = genFileId()
                //     upload.value.handleStart(file)
                // }

            }

        })
        app.use(ElementPlus)
        app.mount('#app')
    </script>
</body>

</html>